<template>
  <div>
    <nav-bar class="nav_bar">
      <img slot="left" class="back" @click="backClick" src="../../../assets/img/navbar/ic_title_close.png">
      <div class="title" slot="center">
        {{title}}
      </div>
    </nav-bar>
    <div class="content">
      <div v-if="appType === '277'">
        <img class="img_strategy" src="../../../assets/img/strategy/img_strategy.png" alt="">
        <div class="btn_strategy">
          <button @click="startClick">开始赚钱</button>
        </div>
      </div>
      <div v-else>
        <!-- <img class="img_strategy" src="../../../assets/img/strategy/img_strategy.png" alt=""> -->
        <img class="img_strategy_cat" src="../../../assets/img/strategy/img_strategy_cat/img_01.png"/>
        <img class="img_strategy_cat" src="../../../assets/img/strategy/img_strategy_cat/img_02.png"/>
        <img class="img_strategy_cat" src="../../../assets/img/strategy/img_strategy_cat/img_03.png"/>
        <img class="img_strategy_cat" src="../../../assets/img/strategy/img_strategy_cat/img_04.png"/>
        <img class="img_strategy_cat" src="../../../assets/img/strategy/img_strategy_cat/img_05.png"/>
        <img class="img_strategy_cat" src="../../../assets/img/strategy/img_strategy_cat/img_06.png"/>
        <div class="btn_strategy_cat">
          <button @click="startClick">开始赚钱</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from '@/components/common/navbar/NavBar.vue'
import Scroll from '@/components/common/scroll/Scroll.vue'
import { appType } from '../../../assets/js/app'
  export default {
    components: {
      NavBar,
      Scroll,
    },
    data() {
      return {
        title: '推广攻略',
        appType: null,
      }
    },
    created () {
      this.appType = appType();
    },
    methods: {
      backClick() {
        this.$router.back()
      },
      startClick() {
        this.$router.push('/home')
      }
    },
  }
</script>

<style scoped>
.nav_bar {
  background: #fff;
}

.back {
  width: 44px;
  height: 44px;
}

.content {
  margin-top: 88px;
}

.img_strategy {
  display: block;
  width: 750px;
  height: 7705px;
}

.img_strategy_cat {
  display: block;
  width: 750px;
}

.btn_strategy,
.btn_strategy_cat {
  padding: 40px 150px;
  background: #fff;
}

.btn_strategy button {
  outline: none;
  border: 0;
  width: 100%;
  height: 88px;
  background: #2F41EB;
  border-radius: 44px;
  font-size: 32px;
  color: #fff;
  font-weight: bold;
  text-align: center;
  line-height: 88px;
  padding-bottom: env(safe-area-inset-bottom);
}

.btn_strategy_cat button {
  outline: none;
  border: 0;
  width: 100%;
  height: 88px;
  background: linear-gradient(314deg,#ff5e39 10%, #ff8210 87%);
  border-radius: 44px;
  font-size: 32px;
  color: #fff;
  font-weight: bold;
  text-align: center;
  line-height: 88px;
  padding-bottom: env(safe-area-inset-bottom);
}
</style>